<template>
  <div>
    <el-table :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header"
      @row-click="rowClick">
      <el-table-column align="center" fixed="left" label="序号" type="index" width="50" />

      <el-table-column :min-width="160" :show-overflow-tooltip="true" fixed="left" header-align="center" label="终端名称"
        prop="terminalName" />

      <el-table-column :min-width="100" fixed="left" header-align="center" label="终端类型">
        <template #default="{row}">
          {{ getLabel('app_mode', row.terminalType) }}
        </template>
      </el-table-column>

      <el-table-column :label="label" :min-width="140" align="center">
        <template #default="{row}">
          {{ dateFormat("yyyy-mm-dd", row.directionTime) }}
        </template>
      </el-table-column>

      <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="商品名"
        prop="productName" />

      <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="通用名"
        prop="productPopularName" />

      <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="生产厂家"
        prop="producer" />

      <el-table-column :min-width="160" :show-overflow-tooltip="true" header-align="center" label="批准文号"
        prop="approvalNumber" />

      <el-table-column :min-width="130" :show-overflow-tooltip="true" align="center" label="包装规格" prop="packSpecs" />

      <el-table-column :min-width="100" :show-overflow-tooltip="true" align="center" label="计价单位" prop="minSaleUnit">
        <template #default="{row}">
          {{ getLabel('sell_unit', row.minSaleUnit) }}
        </template>
      </el-table-column>

      <el-table-column :min-width="120" :show-overflow-tooltip="true" align="center" label="批号" prop="batchNumber" />

      <el-table-column :min-width="100" align="center" fixed="right" label="营销数量" prop="directionNumber" />

      <el-table-column v-if="boole === 1" :min-width="160" :show-overflow-tooltip="true" fixed="right"
        header-align="center" label="渠道客户名称" prop="agentName" />
    </el-table>
  </div>
</template>

<script>
import {
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "OriginalDetail",
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    businessFlowType: {
      type: String,
      default: "0",
    },
  },
  setup(props) {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    var data = reactive({
      label: "",
      boole: 0,
    });
    watch(
      () => props.businessFlowType,
      (newval, oldval) => {
        if (newval) {
          if (newval === "1") {
            data.label = "配送日期";
            data.boole = 1;
          }
          if (newval === "2") {
            data.label = "营销日期";
            data.boole = 2;
          }
        }
      },
      { immediate: true, deep: true }
    );
    const currentInstance = getCurrentInstance();
    onMounted(() => {
      if (route.query.type === "1") {
        data.label = "配送日期";
        data.boole = 1;
      }
      if (route.query.type === "2") {
        data.label = "营销日期";
        data.boole = 2;
      }
      console.log(data.boole);
    });

    return {
      ...toRefs(data),
      route,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
